<template>
  <div class="show">
    <div v-if="shopcarget" class="shopcar-box">
      <div
        class="shopcar"
        :class="[tran ? 'shop-tran' : '']"
        v-for="item in shopcarget"
        :key="item._id"
      >
        <img :src="item.imgUrl" alt="" />
        <div class="title-shop">
          <div class="shopcar-title">
            <img
              class="shop-tianmao"
              src="https://cmsstatic.ffquan.cn/wap_new/common/images/tm.png?v=2021-06-04"
            />
            <p class="title-p">{{ item.d_title }}</p>
          </div>
          <div class="title">
            <p class="title-quan">
              券后<b>￥</b>
              <span>{{ item.price }}</span>
            </p>
            <div class="product-info">
              <span class="juan"><span>劵</span>{{ item.num }}元</span>
            </div>
            <div class="sales">
              已售<span v-if="item.sales > 10000"
                >{{ (item.sales / 10000).toFixed(1) }}万</span
              ><span v-if="item.sales < 10000">{{ item.sales }}</span>
            </div>
            <div class="comm">
              <span>{{ item.comment }}</span
              >进店》
            </div>
          </div>
        </div>
        <input type="checkbox" />
      </div>
    </div>
    <div v-else class="show-header">
      <div class="show-img"></div>
      <p class="show-p">暂无收藏</p>
      <div class="btn" @click="goHome">去首页逛逛吧</div>
    </div>
    <div class="handpick">
      <span class="handp">
        <em class="em-one"></em>
        <van-icon name="like" />
        为你精选
        <em class="em-two"></em>
      </span>
      <div v-if="!shows" class="loading">
        <span></span>
        <van-loading color="#1989fa" size="50px" />
      </div>
      <div v-else class="shop">
        <div class="shop-box" v-for="item in shows" :key="item.id">
          <img class="shop-pic" :src="item.pic" />
          <div class="shop-p">
            <div class="shop-title">
              <img
                class="shop-tianmao"
                src="https://cmsstatic.ffquan.cn/wap_new/common/images/tm.png?v=2021-06-04"
              />
              <p class="title-p">{{ item.d_title }}</p>
            </div>
            <div class="title">
              <p class="title-quan">
                <span class="ju" v-if="item.p_labels.type"
                  ><img
                    src="https://cmsstatic.ffquan.cn/wap_new/common/images/juhuasuan.png?v=2021-06-04"
                /></span>
                券后<b>￥</b>
                <span>{{ item.jiage }}</span>
                <span v-if="item.p_labels.type" class="red_bubble">
                  限时价
                  <span class="triangle"></span>
                </span>
              </p>
              <div class="product-info">
                <span
                  v-for="i in item.label"
                  :key="i.type"
                  class="goods"
                  :class="[i.type == 1 ? 'info-one' : 'info-two']"
                  >{{ i.title }}</span
                >
                <span class="juan"><span>劵</span>{{ item.quan_jine }}元</span>
              </div>
              <div class="sales">
                已售<span v-if="item.xiaoliang > 10000"
                  >{{ (item.xiaoliang / 10000).toFixed(1) }}万</span
                ><span v-if="item.xiaoliang < 10000">{{ item.xiaoliang }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getCookie } from "@/utils";
export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      backFlag: true,
      menuFlag: true,
      tran: false,
    });
    const shows = computed(() => store.state.show.shows);
    const shopcarget = computed(() => store.state.shopcar.shoplist);
    console.log("1", shopcarget);
    onMounted(() => {
      store.dispatch({
        type: "show/getLists",
        params: {
          token:
            "zgQcOi0MW-Z_yc39jN4H8Spp0N2irnCAzm39c9-F04wS6cznIKIFTcAMZyPR14Ryp6sSDkLHXiYnIvqDHsMjFP67yil_rk0MqqI1mf5V35c",
        },
      });
      store.dispatch({
        type: "shopcar/getshop",
        params: {
          token: getCookie("token"),
        },
      });
    });
    return {
      shows,
      ...toRefs(state),
      shopcarget,
      goHome() {
        router.push({
          name: "home",
        });
      },
    };
  },
});
</script>
<style lang="stylus" scoped>
*
  padding 0
  margin 0

.show
  background-color rgb(245,245,245)
  .shopcar-box
    padding-bottom: 0.2rem;
  .shop-tran
    transform translate(.4rem)
  .shopcar
    display flex
    background-color #fff
    padding .1rem
    height 1.26rem
    position relative
    input
      position absolute
      top 50%
      left -6%
    >img
      width 1.26rem
      height 1.26rem
      border-radius: 3px;
      display block
      margin-right .21rem
    .title-shop
      display flex
      flex-direction column
      justify-content space-between
      .shopcar-title
        display flex
        .title-p
          width 1.7rem
          padding 0
          margin 0
          font-size 0.12rem
          text-align left
          flex 1
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          padding-left .1rem

        .shop-tianmao
          width .24rem
          height .13rem
  .show-header
    height 3.5rem
    .show-img
      background url('https://cmsstatic.ffquan.cn/wap_new/common/images/ui-def.png?v=2021-06-04')
      background-size  auto 100%
      width  2rem
      height  2rem
      display  block
      color  #fff
      text-align  center
      line-height  2rem
      margin  0 auto 0.1rem
      border-radius  500px
      font-size  1.5rem
    .show-p
      font-size .15rem
      text-align center
    .btn
      width 1.2rem
      text-align center
      border-radius 50px
      font-size .15rem
      color #fff
      border 0
      padding .1rem .2rem
      margin .2rem auto
      background linear-gradient(to left,#FBAA58 0,#FA4DBE 100%)
.handpick
  text-align center
  .loading
    span
      display block
      height .8rem
  .handp
    display block
    position relative
    font-size .15rem
    color #FC3F78
    margin-bottom .2rem
    em
      width .5rem
      top 50%
      height 1px
      border-top solid 1px #FC3F78
      position absolute
      display inline-block
      &:before
        content ""
        width 3px
        height 3px
        top -2px
        border-radius 100px
        background #FC3F78
        position absolute
        z-index 1
    .em-one
      left 20%
      text-align right
    .em-two
      right 20%
      text-align left
  .shop
    display flex
    justify-content center
    flex-wrap wrap
    .shop-box
      margin-top .05rem
      width 48%
      font-size .15rem
      background-color #fff
      border-radius 5px
      overflow hidden
      &nth-child(even)
        margin-left .05rem
      .shop-pic
        width 1.8rem
        height 1.8rem
        display block
      .shop-p
          padding .1rem .09rem
          box-sizing border-box
          height 1.11rem
          display flex
          flex-direction column
        .shop-title
          display flex
          align-items center
          .title-p
            padding 0
            margin 0
            font-size .12rem
            text-align left
            flex 1
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
          .shop-tianmao
            width .24rem
            height .13rem
.title
  flex 1
  display flex
  flex-direction column
  .title-quan
    .ju
      font-size 0
      margin-right 0.03rem
      line-height 0
      img
        width .12rem
        height .12rem
    .red_bubble
      position relative
      z-index 1
      font-size 9px
      font-weight 400
      color #fff
      background linear-gradient(150deg,#fe3a33 0,#fb8d2c 100%)
      line-height 12px
      padding 0 3px
      margin-left 5px
      top -2px
      height 12px
      .triangle
        position absolute
        left -4px
        top 0
        width 0
        height 0
        z-index -1
        border-color #f8403a transparent transparent
        border-width 6px 8px
        border-style solid
        transform rotate(0)
    flex 1
    display flex
    align-items flex-end
    text-align left
    font-size .1rem
    b
      color #FF2B22
    span
      color #FF2B22
      font-size 0.18rem
      line-height 0.16rem
  .product-info
    display flex
    justify-content left
    padding 0.05rem 0
    .goods
      height .12rem
      border-radius 2px
      border 1px solid
      font-size 9.5px
      font-weight 400
      padding 0 .03rem
      margin-right 5px
      line-height .12rem
      vertical-align middle
    .info-one
      border-color rgba(255,1,55,.55)
      color #FF0137
    .info-two
      border-color rgba(245,114,36,.7)
      color #F57223
    .juan
      height .14rem
      background linear-gradient(90deg,#ff8873 0,#ff4f4f 100%)
      border-radius 2px
      padding 0 .05rem 0 .01rem
      font-size 0.09rem
      font-weight 400
      color #fff
      line-height 0.14rem
      display inline-block
      position relative
      top 0
      vertical-align middle
      span
        background #fff
        border-radius 1px 0 0 1px
        font-size 10px
        color #FE3A33
        margin auto 5px auto 0
        min-width 12px
        max-width 12px
        min-height 12px
        max-height 12px
        display inline-block
        line-height 12px
        text-align center
        vertical-align middle
  .sales
    font-size .1rem
    color #888
    text-align left
  .comm
    font-size .1rem
    span
      color #888

/deep/.van-grid-item__icon
  font-size 1.8rem
/deep/.van-grid-item__content
  padding 0
  margin 0 .03rem
</style>
>>>>>>> lxl
